<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本用法</title>
    <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
    <script>
        // function f1(){
        //     document.getElementById("d1").innerHTML = "Hello World";
        // }
        window.onload = function(){
            document.getElementById("btn").onclick=function(){
                document.getElementById("d1").innerHTML = "Hello World";
            }
        }
        // document--DOM对象
        // DOM对象-->jquery对象 ${DOM对象}
        $(document).ready(function(){
            $("#btn").click(function(){
                $("#d1").html("Hello JQuery");
            })
        });

        // 简化版
        $(function(){
            $("#btn").click(function(){
                // $("#d1").html("Hello JQuery");
                $("#d1").html($("#btn").html());
                // this --> 当前事件源
                // this表示DOM对象
                // console.log(this.innerHTML);
                console.log($(this).html());
                // jquery对象-->DOM:jquery对象.get(0)或者jquery对象[0]
                console.log($("#btn").get(0).innerHTML)
                console.log($("#btn")[0].innerHTML)
            })
        })
    </script>
</head>
<body>
<button id="btn">测试</button>
<div id="d1"></div>
</body>
</html>